<template>
	<!-- 背景图片 -->
	<image class="ancestral_detail_bgc" :style="{ width: clientWidth + 'px' }" :src="cemeteryBgUrl" mode="aspectFill">
	</image>

	<!-- 返回按钮 -->
	<view class="return_box" :style="{ top: statusBarHeight + 'px' }">
		<image style="width: 64rpx; height: 64rpx" @click="back" :src="imgUrl + 'imgs/home/BACK.png'" mode=""></image>
	</view>
	<view class="content">
		<view class="zhaungxiu2" @click="openRenovation" v-if="showFunc && (userType === 1 || userType === 2)">
			<image src="http://112.124.50.179:8888/imgs/home/mubei.png" mode="widthFix" class="two"></image>
			<text class="ft">装修墓地</text>
		</view>
		<!-- <view class="cemetery2">
			<view class="con">
				<view class="mbbg" v-if="dataObj.peopleList && dataObj.peopleList.length == 1">
					<view class="headList" v-for="(item, index) in dataObj.peopleList">
						<view class="time1">立于{{ dataObj.createdTime }}</view>
						<view class="xk">
							<view class="xiangkuang">
								<image :src="item.imageUrl" mode=""></image>
							</view>
							<view class="name">{{ item.name }}</view>
						</view>
						<view class="time2">生于{{ item.birthTime }}</view>
						<view class="time3">逝于{{ item.deathTime }}</view>
					</view>
				</view>
				<view class="mbbg2" v-if="dataObj.peopleList && dataObj.peopleList.length == 2">
					<view class="headList" v-for="(item, index) in dataObj.peopleList">
						<view class="time1">立于{{ dataObj.createdTime }}</view>
						<view class="xk">
							<view class="xiangkuang">
								<image :src="item.imageUrl" mode=""></image>
							</view>
							<view class="name">{{ item.name }}</view>
						</view>
						<view class="time2">生于{{ item.birthTime }}</view>
						<view class="time3">逝于{{ item.deathTime }}</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 祭品的展示 -->
		<!-- 非墓地5 -->
		<view class="oblationBox" v-if="!cemeteryBgUrl.includes('墓地5')">
			<swiper class="oblationRow" :disable-touch="true" circular :vertical="true" :autoplay="true"
				:interval="3000">
				<swiper-item v-for="(items, index) in Math.ceil(oblationList.list.length / 7)">
					<image v-for="(item, index) in oblationList.list.slice((items - 1) * 7, items * 7)"
						:src="item.imageUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 祭品的展示2 -->
		<!-- 墓地5 -->
		<view class="oblationBox2" v-else>
			<swiper class="oblationRow1" :disable-touch="true" circular :vertical="true" :autoplay="true"
				:interval="3000">
				<swiper-item v-for="(items, index) in Math.ceil(oblationList1.list.length / 2)">
					<image v-for="(item, index) in oblationList1.list.slice(
							(items - 1) * 2,
							items * 2
						)" :src="item.imageUrl" mode=""></image>
				</swiper-item>
			</swiper>
			<swiper class="oblationRow2" :disable-touch="true" circular :vertical="true" :autoplay="true"
				:interval="3000">
				<swiper-item v-for="(items, index) in Math.ceil(oblationList2.list.length / 3)">
					<image v-for="(item, index) in oblationList2.list.slice(
							(items - 1) * 3,
							items * 3
						)" :src="item.imageUrl" mode=""></image>
				</swiper-item>
			</swiper>
			<swiper class="oblationRow3" :disable-touch="true" circular :vertical="true" :autoplay="true"
				:interval="3000">
				<swiper-item v-for="(items, index) in Math.ceil(oblationList3.list.length / 2)">
					<image v-for="(item, index) in oblationList3.list.slice(
							(items - 1) * 2,
							items * 2
						)" :src="item.imageUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 特效 -->
		<view>
			<!-- 擦墓碑 -->
			<div class="wipe-wrap" v-if="animation.gravestone">
				<div class="feather-duster-left">
					<image src="http://112.124.50.179:8888/imgs/home/LEFT.png" mode="widthFix" />
				</div>
				<div class="feather-duster-right">
					<image src="http://112.124.50.179:8888/imgs/home/RIGHT.png" mode="heightFix" />
				</div>
				<div class="shine shine1"></div>
				<div class="shine shine2"></div>
				<div class="shine shine3"></div>
				<div class="shine shine4"></div>
				<div class="shine shine5"></div>
			</div>
			<!-- 除草 -->
			<div :class="['grass-wrap', cemeteryBgUrl.includes('墓地5') && 'grass-wrap2']" v-if="!isWeedControl">
				<div :class="[
						'grass_small1',
						animation.weed && 'delayUp1',
						animation.weed && 'delayUp1'
					]">
					<image src="http://112.124.50.179:8888/imgs/home/c1.png" mode="widthFix" />
				</div>
				<div :class="[
						'grass_small2',
						animation.weed && 'delayUp2',
						animation.weed && 'delayUp2'
					]">
					<image src="http://112.124.50.179:8888/imgs/home/c2.png" mode="widthFix" />
				</div>
				<div id="grassWrap">
					<div :class="['grass-item', 'grass-item_1', animation.weed && 'weedAni1']" data-t="1728982988565"
						style="animation-delay: 0s">
						<image src="http://112.124.50.179:8888/imgs/home/c3.jpg" mode="widthFix" />
					</div>
					<div :class="['grass-item', 'grass-item_4', animation.weed && 'weedAni2']" data-t="1728982988675"
						style="animation-delay: 0.5s">
						<image src="http://112.124.50.179:8888/imgs/home/c4.png" mode="widthFix" />
					</div>
					<div :class="['grass-item', 'grass-item_2', animation.weed && 'weedAni3']" data-t="1728982988814"
						style="animation-delay: 1s">
						<image src="http://112.124.50.179:8888/imgs/home/c5.png" mode="widthFix" />
					</div>
					<div :class="['grass-item', 'grass-item_5', animation.weed && 'weedAni4']" data-t="1728982988862"
						style="animation-delay: 1.5s">
						<image src="http://112.124.50.179:8888/imgs/home/c6.png" mode="widthFix" />
					</div>
					<div :class="['grass-item', 'grass-item_3', animation.weed && 'weedAni5']" data-t="1728982988923"
						style="animation-delay: 2s">
						<image src="http://112.124.50.179:8888/imgs/home/c7.png" mode="widthFix" />
					</div>
				</div>
				<div v-if="animation.weed" class="glove-wrap"></div>
			</div>
			<!-- 跪拜 -->
			<view class="gif">
				<image class="gb" src="http://112.124.50.179:8888/imgs/home/gb.gif" v-if="animation.gb"></image>
				<image class="jg" src="http://112.124.50.179:8888/imgs/home/jg.gif" v-if="animation.jg"></image>
			</view>
		</view>
	</view>

	<!-- 右边功能 -->
	<view class="cemetery_detail_funcList" v-if="showFunc">
		<view class="invite" :style="{ right: windowWidth / 2 - clientWidth / 2 + 'px' }" @click="copyInviteCode">
			复制邀请码
			<image src="http://112.124.50.179:8888/imgs/home/copy.png"></image>
		</view>
		<view class="cemetery_detail_fucItem" :style="{ right: windowWidth / 2 - clientWidth / 2 - 18 + 'px' }">
			<image :src="imgUrl + 'imgs/home/temple_music.png'" mode=""
				:class="['rotating-element', !musicPlay && 'paused']" @click="clickMusic"></image>
			音乐
		</view>
		<view v-if="userType == 1 || dataObj.detailed === 1" class="cemetery_detail_fucItem"
			@click="goUrl('/subPages/home/memoryHall/rest')"
			:style="{ right: windowWidth / 2 - clientWidth / 2 - 18 + 'px' }">
			<image :src="imgUrl + 'imgs/home/temple_real.png'" mode=""></image>
			真实墓地
		</view>
		<view class="cemetery_detail_fucItem" :style="{ right: windowWidth / 2 - clientWidth / 2 - 18 + 'px' }"
			@click="showMoreFunc = true">
			<image :src="imgUrl + 'imgs/home/temple_more.png'" mode=""></image>
			更多
		</view>
	</view>

	<!-- 底部功能区 -->
	<view class="fixed" v-if="showFunc">
		<Bubble :list="scrollList" bgc="rgba(14, 14, 14, 0.25)" />
		<view class="fixed_con">
			<view class="fixed_con_" @click="gravestone">
				<image src="http://112.124.50.179:8888/imgs/home/G1.png" mode=""></image>
				<text>擦墓碑</text>
			</view>
			<view class="fixed_con_" @click="weed">
				<image src="http://112.124.50.179:8888/imgs/home/G2.png" mode=""></image>
				<text>除草</text>
			</view>
			<view class="fixed_con_" @click="openOblation">
				<image src="http://112.124.50.179:8888/imgs/home/G3.png" mode=""></image>
				<text>祭品</text>
			</view>
			<view class="fixed_con_" @click="koubaiRef.show = true">
				<image src="http://112.124.50.179:8888/imgs/home/G4.png" mode=""></image>
				<text>跪拜</text>
			</view>
			<view class="fixed_con_" @click="goUrl('/subPages/home/memoryHall/life_story')">
				<image src="http://112.124.50.179:8888/imgs/home/G5.png" mode=""></image>
				<text>生平</text>
			</view>
		</view>
	</view>

	<u-popup :show="showMoreFunc" bgColor="rgba(0,0,0,0)" @close="showMoreFunc = false"
		custom-style="padding:0 16rpx 0;">
		<view style="margin-bottom: 16rpx; border-radius: 26rpx; overflow: hidden">
			<u-button v-if="userType === 1" shape="circle" :custom-style="{ ...moreBtnStyle }"
				@click="goUrl('/subPages/home/memoryHall/setting')">
				墓地设置
			</u-button>
			<u-button v-if="userType == 1 || userType == 2" shape="circle" :custom-style="{
					...moreBtnStyle
				}" @click="goUrl('/subPages/home/memoryHall/friendGroup')">
				亲友团管理
			</u-button>
			<u-button @click="goUrl('/subPages/home/memoryHall/Memorial')" shape="circle" :custom-style="{
					...moreBtnStyle
				}">
				供奉记录
			</u-button>
			<u-button @click="goUrl('/subPages/chaoshan/report?reportType=9&&reportedId=' + memorialId)" shape="circle"
				:custom-style="{ ...moreBtnStyle }" v-if="userType == 2 || userType == 3">
				举报
			</u-button>
			<u-button shape="circle" :custom-style="moreBtnStyle" @click="openInvite">
				分享
			</u-button>
		</view>

		<u-button shape="circle" :custom-style="{
				...moreBtnStyle,
				fontWeight: 600,
				borderRadius: '26rpx',
				marginBottom: '16rpx'
			}" @click="showMoreFunc = false">
			取消
		</u-button>
	</u-popup>

	<!-- 分享 -->
	<sharePopup v-model:show="showShare" title="分享到" height="592rpx" :invitedCode="dataObj.memorialInvitationCode"
		:isInvitedCode="true"></sharePopup>

	<!-- 装修 -->
	<RenovationMemoryHall ref="renovationMemoryHallRef" @query="query" :belongingTo="2"
		:cemeteryType="dataObj.peopleList.length" :id="memorialId" @close="closeRenovation" @previewBgc="previewBgc" />

	<!-- 祭品 -->
	<oblation ref="oblationRef" :offeringType="2" @finish="finishOblation" />

	<!-- 跪拜 -->
	<koubai ref="koubaiRef" @koubai="handleKoubai"></koubai>

	<!-- 购买动画效果 -->
	<buyAni ref="buyAniRef" :pics="aniPics" />
</template>

<script setup>
	import cemetery1 from '../common/cemetery1.vue';
	import sharePopup from '/components/popup/share.vue';
	import {
		reactive,
		nextTick,
		onBeforeUnmount,
		onMounted,
		ref,
		getCurrentInstance,
		watch
	} from 'vue';
	import {
		onUnload,
		onShow,
		onHide,
		onLoad,
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import RenovationMemoryHall from '../common/renovation_memoryHall.vue';
	import {
		imgUrl
	} from '@/external/utils/imgUrl';
	import oblation from '@/subPages/common/oblation.vue';
	import koubai from '@/subPages/common/koubai.vue';
	import Bubble from '@/components/bubble/index.vue';
	import buyAni from '@/subPages/common/buyAni.vue';
	import _ from 'lodash';
	import store from '@/store/index.js';
	import CommonApi from '@/API/commenApi';
	import HomeApi from '@/API/home/index.js';
	const homeApi = new HomeApi();
	const commonApi = new CommonApi();

	const statusBarHeight = getApp().globalData.statusBarHeight;
	const windowWidth = uni.getSystemInfoSync().windowWidth;
	const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().windowWidth;

	const showShare = ref(false);
	const showMoreFunc = ref(false);
	const moreBtnStyle = {
		height: '120rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		borderRadius: '0'
	};
	let height = ref('0');
	let navHeight = ref('0');
	let tabIndex = ref(0);
	let userType = ref(0); //用户类型，1是创建者，2是管理人员，3是普通成员
	let dataObj = ref({
		peopleList: [{}]
	}); //详情信息
	const renovationMemoryHallRef = ref();

	const showFunc = ref(true); //是否展示功能区
	const animation = reactive({
		gravestone: false,
		weed: false,
		jg: false,
		gb: false
	});
	const oblationRef = ref();
	const koubaiRef = ref();
	const buyAniRef = ref(); //购买动画
	const aniPics = ref([]); //购买的图片
	const ybCoinNumber = ref(0); //福币余额
	const userName = ref(''); //用户名称
	let timer = ref(null);
	const memorialId = ref(); //墓园id
	//祭品摆放
	const oblationList = reactive({
		list: []
	});

	//特殊背景祭品摆放
	const oblationList1 = reactive({
		list: []
	});
	const oblationList2 = reactive({
		list: []
	});
	const oblationList3 = reactive({
		list: []
	});

	//滚动屏
	const scrollList = ref([]);
	//是否除草,false沒有
	const isWeedControl = ref(true);

	//音乐播放
	const musicPlay = ref(true);
	const musicUrl = ref();
	let innerAudioContext = null; //音乐对象

	//背景
	const cemeteryBgUrl = ref();

	onLoad((options) => {
		//是否展示装修
		if (options.showDecoration == 1) {
			nextTick(() => {
				openRenovation();
			});
		}

		//角色类型
		userType.value = JSON.parse(uni.getStorageSync('cemeteryItem')).userType;

		//墓园id
		memorialId.value = JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId;

		//获取音乐
		getMusic();

		//记录埋点
		enterObject();
	});

	onShow(() => {
		//获取个人信息
		getUserInfo();

		//获取墓园信息
		query();

		//打开音乐
		if (musicPlay.value) {
			innerAudioContext?.play();
		}

		//打开功能区
		showFunc.value = true;
	});

	// 页面卸载
	onUnload(() => {
		showMoreFunc.value = false;
		innerAudioContext.destroy();
	});
	//页面后台
	onHide(() => {
		showMoreFunc.value = false;
		if (musicPlay.value) {
			musicPlay.value = false;
			innerAudioContext.pause();
		}

		//关闭贡品弹框
		oblationRef.value.show = false;
	});

	/**
	 * 记录埋点
	 */
	const enterObject = async () => {
		let res = await commonApi.enterObject({
			Id: memorialId.value,
			belongTo: 2
		});
		if (res.code === 0) {
			console.log('记录埋点');
		}
	};

	//获取个人祭拜的物品等信息
	const getOfferingInfo = async () => {
		let res = await homeApi.getCemeteryOffered({
			memorialId: memorialId.value
		});
		if (res.code === 0) {
			let list = res.data.items;

			// 祭品轮播格式1 --- 非墓地5
			oblationList.list = list || [];

			// 祭品轮播格式2 --- 墓地5
			oblationList1.list = [];
			oblationList2.list = [];
			oblationList3.list = [];
			// 遍历数组，按照7个一循环进行处理
			for (let i = 0; i < list.length; i += 7) {
				// 获取当前循环的7个元素（如果不足7个，则会获取剩余的所有元素）
				let chunk = list.slice(i, i + 7);

				// 将前两个元素复制到数组
				oblationList1.list = oblationList1.list.concat(chunk.slice(0, 2));

				// 将中间三个元素复制到数组
				oblationList2.list = oblationList2.list.concat(chunk.slice(2, 5));

				// 将后面两个元素复制到数组
				oblationList3.list = oblationList3.list.concat(chunk.slice(5, 7));
			}
		}
	};

	/**
	 * 获取墓园信息
	 */
	const query = () => {
		homeApi
			.getMemorialCemeteryInfoApi({
				memorialId: memorialId.value
			})
			.then((res) => {
				dataObj.value = res.data;

				//是否已经除草，false没有
				isWeedControl.value = res.data.lightUp === 1 ? false : true;

				//背景
				if (res.data.peopleList.length === 1) {
					//单人背景
					if (res.data.decorationUrl) {
						cemeteryBgUrl.value = res.data.decorationUrl.split(',')[0];
					} else {
						cemeteryBgUrl.value = imgUrl + 'imgs/home/cemetery_defaultBgc.png';
					}
				} else {
					//双人背景
					if (res.data.decorationUrl) {
						cemeteryBgUrl.value =
							res.data.decorationUrl.split(',').length > 1 ?
							res.data.decorationUrl.split(',')[1] :
							'';
					} else {
						cemeteryBgUrl.value = imgUrl + 'imgs/home/cemetery_defultBgc2.png';
					}
				}
				console.log(cemeteryBgUrl.value);

				//福币余额
				ybCoinNumber.value = res.data.ybCoinNumber;
				store.state.userInfo.userInfo.ybCoinNumber = ybCoinNumber.value;
				//滚动屏
				scrollList.value = res.data.offeringRecordList;

				//获取祭品信息
				getOfferingInfo();
			});
	};

	/**
	 * 除草
	 */
	const weed = () => {
		if (!timer.value) {
			homeApi
				.weedApi({
					memorialId: memorialId.value,
					actiontype: 3
				})
				.then((res) => {
					animation.weed = true;
					timer.value = setTimeout(() => {
						animation.weed = false;
						timer.value = null;
						isWeedControl.value = true;
						query();
					}, 5000);
				});
		}
	};

	/**
	 * 擦墓碑
	 */
	const gravestone = () => {
		if (!timer.value) {
			homeApi
				.weedApi({
					memorialId: memorialId.value,
					actiontype: 2
				})
				.then((res) => {
					animation.gravestone = true;
					timer.value = setTimeout(() => {
						animation.gravestone = false;
						timer.value = null;
						query();
					}, 5000);
				});
		}
	};

	/**
	 * 叩拜行礼
	 */
	const handleKoubai = (item, index) => {
		koubaiRef.value.show = false;
		showGif(index);
	};

	/**
	 * 跪拜动图
	 */
	const showGif = (type) => {
		if (!timer.value) {
			homeApi
				.weedApi({
					memorialId: memorialId.value,
					actiontype: 1
				})
				.then((res) => {
					if (type === 1) {
						showFunc.value = false;
						//跪拜
						animation.gb = true;
						timer.value = setTimeout(() => {
							animation.gb = false;
							timer.value = null;
							showFunc.value = true;
							query();
						}, 6500);
					} else if (type === 2) {
						//鞠躬
						showFunc.value = false;
						animation.jg = true;
						timer.value = setTimeout(() => {
							animation.jg = false;
							timer.value = null;
							showFunc.value = true;
							query();
						}, 6500);
					}
				});
		}
	};

	const openOblation = () => {
		oblationRef.value.show = true;
	};

	function numberChinese(str, isYear) {
		if (str) {
			let chinese = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
			let numStr = str.replace(/[^0-9]+/g, '');
			let year =
				chinese[numStr[0]] + chinese[numStr[1]] + chinese[numStr[2]] + chinese[numStr[3]];
			let month = numStr[4] === '0' ? chinese[numStr[5]] : chinese[10];
			let day = '';
			if (numStr[6] === '0') {
				day = chinese[numStr[7]];
			} else if (numStr[6] === '1') {
				if (numStr[7] === '0') {
					day = chinese[10];
				} else {
					day = chinese[10] + chinese[numStr[7]];
				}
			} else if (numStr[6] === '2' || numStr[6] === '3') {
				if (numStr[7] === '0') {
					day = chinese[numStr[6]] + chinese[10];
				} else {
					day = chinese[numStr[6]] + chinese[10] + chinese[numStr[7]];
				}
			}
			if (isYear) {
				return year + '年';
			} else {
				return year + '年' + month + '月' + day + '日';
			}
		}
	}

	/**
	 * 获取个人信息
	 */
	const getUserInfo = async () => {
		if (!store.state.userInfo.userInfo.phoneNumber) {
			await store.dispatch('setUserInfo');
		}
		ybCoinNumber.value = store.state.userInfo.userInfo.ybCoinNumber;
		userName.value =
			store.state.userInfo.userInfo.nickName || store.state.userInfo.userInfo.phoneNumber;
	};

	/**
	 * 购买贡品成功
	 */
	const finishOblation = async (buyList) => {
		//更新详情页，获取福币余额
		query();

		//购买动画
		aniPics.value = buyList;
		buyAniRef.value.show = true;

		// 动画结束后再执行
		//获取展示祭品
		setTimeout(() => {
			getOfferingInfo();
		}, 2000);
	};

	const goUrl = (url) => {
		innerAudioContext.pause();
		uni.navigateTo({
			url: url
		});
	};

	/**
	 * 打开装修弹框
	 */
	const openRenovation = () => {
		showFunc.value = false;
		renovationMemoryHallRef.value.show = true;
	};

	/**
	 * 关闭装修弹框
	 */
	const closeRenovation = () => {
		showFunc.value = true;
		query();
	};

	/**
	 * 预览背景
	 */
	const previewBgc = (buyList) => {
		cemeteryBgUrl.value = buyList[0].decorationUrl;
	};

	const openInvite = () => {
		showMoreFunc.value = false;
		showShare.value = true;
	};
	const setTab = (index) => {
		tabIndex.value = index;
		query();
	};

	const back = () => {
		if (isBackPage()) {
			uni.navigateBack({
				delta: 1
			});
		} else {
			uni.reLaunch({
				url: '/pages/home/index/index'
			});
		}
	};

	/**
	 * 复制邀请码
	 */
	const copyInviteCode = () => {
		uni.setClipboardData({
			data: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialInvitationCode,
			success: function() {
				uni.showToast({
					title: '复制成功'
				});
			},
			fail: function(err) {
				console.log('复制失败', err);
			}
		});
	};

	/**
	 * 获取音乐
	 */
	const getMusic = async () => {
		let res = await commonApi.getMusicList({
			Ids: 2
		});
		if (res.code === 0) {
			musicUrl.value = res.data.items ? res.data.items[0].url : '';
			console.log(musicUrl);
			// #ifdef H5
			innerAudioContext = uni.createInnerAudioContext();
			// #endif

			// #ifdef MP-WEIXIN
			innerAudioContext = wx.createInnerAudioContext({
				useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
			});
			// #endif

			innerAudioContext.autoplay = true;
			innerAudioContext.src = musicUrl.value;
			innerAudioContext.loop = true;

			nextTick(() => {
				console.log('打开音乐');
				innerAudioContext.play();
			});
		}
	};

	/**
	 * 暂停/播放音乐
	 */
	const clickMusic = () => {
		musicPlay.value = !musicPlay.value;
		if (musicPlay.value) {
			console.log('打开音乐');
			innerAudioContext.play();
		} else {
			console.log('关闭音乐');
			innerAudioContext.pause();
		}
	};

	/**
	 * 判断是否有返回页面
	 */
	const isBackPage = () => {
		// 获取当前页面栈数组
		const pages = getCurrentPages();

		// 获取数组中最后一个元素，即当前页面的实例
		const currentPage = pages[pages.length - 1];

		// 判断是否有返回页面
		if (pages.length > 1) {
			// 有返回页面
			return true;
		} else {
			// 没有返回页面
			return false;
		}
	};
</script>

<style lang="scss">
	.ancestral_detail_bgc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		z-index: -1;
	}

	.return_box {
		position: fixed;
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		box-sizing: border-box;
		z-index: 999;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.rotating-element {
		animation: rotate 5s linear infinite;
		animation-play-state: running;
		/* 默认运行动画 */
		animation-fill-mode: forwards;
		/* 在动画结束时保留最后的状态 */
	}

	.rotating-element.paused {
		animation-play-state: paused;
		/* 添加一个类来暂停动画 */
	}

	page {
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		height: 100%;
		position: relative;
		padding: 0 !important;
	}

	.header {
		/* #ifdef APP || H5 */
		height: 88rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 80rpx;
		/* #endif */
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 32rpx;
		box-sizing: border-box;

		.header_con {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.back {
				width: 64rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.tabs {
				font-size: 32rpx;
				color: #c5c5c5;
				display: flex;
				align-items: center;
				padding-left: 144rpx;
				width: 100%;
				height: 100%;

				view:nth-child(2) {
					padding-left: 64rpx;
				}
			}

			.header_icon {
				display: flex;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-left: 32rpx;
				}
			}
		}
	}

	.zhaungxiu1,
	.zhaungxiu2 {
		display: flex;
		flex-direction: column;
		position: absolute;
		align-items: center;
		/* #ifdef APP || H5 */
		top: calc(156rpx + 88rpx);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: calc(156rpx + 80rpx);
		/* #endif */
		width: 122rpx;
		padding-left: 32rpx;
		z-index: 9999;

		.one {
			width: 122rpx;
			height: 56rpx;
		}

		.two {
			width: 84rpx;
			height: 84rpx;
		}

		text {
			font-weight: bold;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 24rpx;
			letter-spacing: 1px;
			text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
			text-stroke: 0.3rpx #000000;
			text-align: center;
			font-style: normal;
			text-transform: none;
			-webkit-text-stroke: 0.3rpx #000000;
			margin-top: -20rpx;
			z-index: 999;
		}
	}

	.active {
		color: #fff !important;
	}

	.cemetery_detail_funcList {
		position: fixed;
		bottom: 12vh;
		z-index: 88;
		right: 0;

		.invite {
			background: rgba(0, 0, 0, 0.2);
			padding: 0 20rpx;
			height: 54rpx;
			border-radius: 27rpx 0 0 27rpx;
			color: #fff;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin-bottom: 40rpx;

			image {
				padding-left: 4rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.cemetery_detail_fucItem {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 40rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #ffffff;
			line-height: 20rpx;
			position: relative;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 12rpx;
			}
		}
	}

	@import '/static/css/animation.css';

	.cemetery2 {
		color: #fff;
		position: relative;

		.con {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: relative;
			top: 302rpx;

			.mbbg {
				background: url('http://112.124.50.179:8888/imgs/home/mymb.png') no-repeat;
				background-size: cover;
				background-position: center;
				height: 400rpx;
				width: 100%;
				display: flex;
				justify-content: center;

				.headList {
					display: flex;
					position: relative;

					.xk {
						display: flex;
						position: absolute;
						left: -16rpx;
						top: 30rpx;

						.xiangkuang {
							background: url('http://112.124.50.179:8888/imgs/home/xiangkuang.png') no-repeat;
							background-size: cover;
							background-position: center;
							width: 42rpx;
							height: 56rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 82%;
								height: 85%;
							}
						}
					}

					.name {
						font-size: 18px;
						transform: scale(0.5);
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						top: 16rpx;
						letter-spacing: 4rpx;
					}

					.time1 {
						font-size: 12px;
						transform: scale(0.5);
						position: absolute;
						left: -60rpx;
						top: 0rpx;
						letter-spacing: 4px;
					}

					.time2 {
						font-size: 12px;
						transform: scale(0.5);
						position: absolute;
						right: -55rpx;
						top: -30rpx;
						letter-spacing: 4px;
					}

					.time3 {
						font-size: 12px;
						transform: scale(0.5);
						position: absolute;
						right: -75rpx;
						top: -25rpx;
						letter-spacing: 4px;
					}

					view {
						color: black;
						writing-mode: vertical-lr;
					}
				}
			}

			.mbbg2 {
				background: url('http://112.124.50.179:8888/imgs/home/mymb2.png') no-repeat;
				background-size: cover;
				background-position: center;
				height: 400rpx;
				width: 100%;
				display: flex;
				justify-content: center;

				.headList:nth-child(1) {
					right: 60rpx;
				}

				.headList:nth-child(2) {
					left: 120rpx;
				}

				.headList {
					display: flex;
					position: relative;

					.xk {
						display: flex;
						position: absolute;
						left: -18rpx;
						top: 30rpx;

						.xiangkuang {
							background: url('http://112.124.50.179:8888/imgs/home/xiangkuang.png') no-repeat;
							background-size: cover;
							background-position: center;
							width: 36rpx;
							height: 48rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 82%;
								height: 85%;
							}
						}
					}

					.name {
						font-size: 16px;
						transform: scale(0.5);
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						top: 16rpx;
						letter-spacing: 8rpx;
					}

					.time1 {
						font-size: 12px;
						transform: scale(0.4);
						position: absolute;
						left: -56rpx;
						top: -20rpx;
						letter-spacing: 8px;
					}

					.time2 {
						font-size: 12px;
						transform: scale(0.4);
						position: absolute;
						right: -42rpx;
						top: -70rpx;
						letter-spacing: 8px;
					}

					.time3 {
						font-size: 12px;
						transform: scale(0.4);
						position: absolute;
						right: -58rpx;
						top: -60rpx;
						letter-spacing: 8px;
					}

					view {
						color: black;
						writing-mode: vertical-lr;
					}
				}
			}
		}
	}

	.fixed {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom));
		bottom: calc(env(safe-area-inset-bottom));
		left: 0;
		right: 0;
		padding: 24rpx 32rpx;
		z-index: 50;

		@media screen and (min-width: 992px) {
			width: 828rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}

		.fixed_con {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;
			height: 104rpx;
			margin-top: 72rpx;

			.fixed_con_ {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 42rpx;
					letter-spacing: 1px;
					text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
					text-stroke: 0.3rpx #8d5d2c;
					text-align: center;
					font-style: normal;
					text-transform: none;
					-webkit-text-stroke: 0.3rpx #8d5d2c;
					margin-top: -30rpx;
					z-index: 999;
				}
			}

			image {
				width: 104rpx;
				height: 104rpx;
			}
		}
	}

	.oblationBox {
		width: 100%;
		position: absolute;
		top: 46%;

		.oblationRow {
			width: 100%;
			height: 96rpx;
			pointer-events: none;
		}

		swiper-item {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 96rpx;
			height: 96rpx;
			z-index: 99;
		}
	}

	.oblationBox2 {
		width: 90%;
		position: absolute;
		top: 38.5%;
		left: 50%;
		transform: translateX(-50%);
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.oblationRow1,
		.oblationRow2,
		.oblationRow3 {
			width: 100%;
			height: 72rpx;
			pointer-events: none;
		}

		.oblationRow2 {
			padding-top: 50rpx;
		}

		swiper-item {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 72rpx;
			height: 72rpx;
		}
	}

	.grass-wrap2 {
		top: 39.5%;
	}
</style>